<!--  -->
<template>
  <div v-loading="loading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="map-wrapper">
    <baidu-map class="bm-view" :mapClick="false" :center="center" :scroll-wheel-zoom="true" @ready="handler" :zoom="zoom">
      <!-- 自定义覆盖物 气泡 -->
      <div v-if="!showheatmap">
        <zone-overlay v-for="(item, index) in zoneGeoPoints" :key="index" :position="{lng: item.lng, lat:item.lat}" @click.native="selZone(item, index)" :count="item.count">
        </zone-overlay>
      </div>
      <!-- 点位 -->
      <bm-marker v-if="markerShow" ref="marker" :icon="{url: require('../../assets/marker.png'), size: {width: 32, height: 38}}" @click="handlePoint" v-for="(item,index) in markerPoints" :key="index" :position="{lng: item.lng, lat:item.lat}">
      </bm-marker>
      <!-- 热力图 -->
      <bml-heatmap v-if="showheatmap" :gradient="gradient" :data="zoneGeoPoints" :max="100" :radius="20">
      </bml-heatmap>
      <!-- 自定义地图按钮 -->
      <bm-control style="margin:10px;">
        <!-- <el-button @click="drawer=true" icon="el-icon-search" circle></el-button> -->
        <el-button v-if="markerShow&&!showbtn" @click="drawer=true" icon="el-icon-search">资产查询</el-button>
        <el-button v-if="markerShow" @click="toggle">{{ showbtn ? '关闭热力图' : '打开热力图' }}</el-button>
      </bm-control>

      <!-- 抽屉页面 -->
      <el-drawer title="区域资产" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
        <panel-list :searchData="searchData" :activeName="activeName" @getCheckList="getcheckList" :zoomId="zoomId" />
      </el-drawer>
    </baidu-map>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getPosition,
  getAll,
  getAllRoom,
  getRoomList,
  getRoomByPoint
} from "@/api/map";
import ZoneOverlay from "./components/ZoneOverlay";
import DataToast from "./components/DataToast";
import RightPanel from "@/components/RightPanel";
import PanelList from "./components/PanelList";
import { BmlHeatmap } from "vue-baidu-map";
import mapConfig from "@/assets/custom_map_config.json";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { ZoneOverlay, BmlHeatmap, PanelList },
  data() {
    //这里存放数据
    return {
      loading: false,
      center: { lng: 105.4325634, lat: 28.927475 }, //中心点
      showBoundary: false, //行政区域
      zoneBoundary: "泸州市江阳区", //行政区划名称
      zoom: 12, //缩放级别
      show: false,
      direction: "ltr",
      zoomId: 0,
      markerShow: true, //点位显示
      drawer: false, //抽屉层显示
      zoneGeoPoints: [],
      markerPoints: [],
      showbtn: false,
      activeName: "one",
      showheatmap: false,
      searchData: {},
      page: 1,
      gradient: {
        0.5: "rgb(245,216,80)",
        1: "rgb(231,30,26)"
      },
      mapStyle: {
        styleJson: mapConfig
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handler({ BMap, map }) {
      getPosition().then(res => {
        console.log("位置", res);
        this.center = { lng: res.lng, lat: res.lat };
      });
      getAll().then(res => {
        res.forEach(item => {
          item.count = item.count * 100;
        });
        this.zoneGeoPoints = res;
        // let data = { zoom: this.zoom, value: res };
        // this.$store.dispatch("settings/setZoomInfo", { data });
      });
    },
    //气泡点击事件
    selZone(item, index) {
      console.log(item);
      let data = { page: this.page, id: item.id };
      this.zoomId = item.id;
      this.loading = true;
      getAllRoom(data).then(res => {
        this.loading = false;
        this.searchData = res;
        this.drawer = true;
        this.activeName = "two";
      });
    },
    handlePoint() {
      this.drawer = true;
    },
    //关闭抽屉
    handleClose(done) {
      done();
    },
    toggle() {
      this.showbtn = !this.showbtn;
      if (this.showbtn) {
        this.showheatmap = true;
      } else {
        this.showheatmap = false;
      }
    },
    getcheckList(list) {
      console.log("list", list);
      this.zoneGeoPoints = [];
      this.markerPoints = [];
      list.rows.forEach(item => {
        // this.zoneGeoPoints.push({ lng: item.lng, lat: item.lat });
        this.markerPoints.push({ lng: item.lng, lat: item.lat });
      });
      if (list.length > 0) {
        const data = list.rows;
        this.center.lng = data[0].lng;
        this.center.lat = data[0].lat;
      }
      this.totals = list.total;
      this.zoom = 15;
      this.showZone = false;
      this.markerShow = true;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.bm-view {
  width: 100%;
  height: calc(100vh - 50px);
  // height: 900px;
}
.block {
  width: 160px;
}
</style>